<template>
  <div>
    <!-- 表格 -->
    <el-table :data="orderContent" style="width: 100%" border>
      <el-table-column label="序号" v-slot="{ $index }" fixed="left" align="center">
        {{ getSerialNumber($index) }}
      </el-table-column>
      <el-table-column property="taskNo" label="订单编号" align="center">
      </el-table-column>
      <el-table-column property="regionCode" label="区域编码" align="center">
      </el-table-column>
      <el-table-column property="userName" label="用户名称" align="center">
      </el-table-column>
      <el-table-column property="phone" label="电话" align="center">
      </el-table-column>
      <el-table-column property="requesterId" label="下单id" align="center">
      </el-table-column>
      <el-table-column property="helperId" label="接单id" align="center">
      </el-table-column>
      <el-table-column property="taskTitle" label="标题" align="center">
      </el-table-column>
      <el-table-column property="taskDescription" label="描述" align="center">
      </el-table-column>
      <el-table-column property="status" label="状态" align="center">
      </el-table-column>
      <el-table-column property="reward" label="金额" align="center">
      </el-table-column>
      <el-table-column property="payAmount" label="支付金额" align="center">
      </el-table-column>
      <el-table-column property="discountAmount" label="优惠金额" align="center">
      </el-table-column>
      <el-table-column property="addressId" label="地址" align="center">
      </el-table-column>
      <el-table-column property="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column property="cancelTime" label="取消时间" align="center">
      </el-table-column>
      <el-table-column property="completionDate" label="完成时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <order-dialog :dialogVisible="orderDialog" :orderDetail="orderDetail" @close="handleDialogClose"></order-dialog>
  </div>
</template>
<script>
import OrderDialog from '@/components/OrderDialog/index'
import { getOrderDescriptionApi } from '@/api/order/orderlist'

export default {
  name: "OrderTable",
  components: { OrderDialog },
  props: {
    title: {
      type: String,
      require: true
    },
    orderContent: {
      type: Array,
      require: true
    },
    queryParams: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      orderDialog: false,
      orderDetail: {}
    }
  },
  methods: {
    // 查看按钮操作
    async handleView(row) {
      const res = await getOrderDescriptionApi(row.id)
      if (res.code === 200) {
        this.orderDialog = true
        this.orderDetail = res.data
      }
    },
    getSerialNumber(index) {
      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
    },
    handleDialogClose(data) {
      this.orderDialog = data
    }
  }
}
</script>
<style lang="scss" scoped></style>